<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<template >
			<view class="h90">
				<view class="fix-wrap">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="rult.search" class="sc-inp" @confirm="search">
						<view v-if="rult.search" class="clear-btn iconfont f-s44" @click="clearKeywords">&#xe724;</view>
					</view>
					<view class="filter-bar">
						<view class="item" :class="{'active':selected==item.id}" v-for="(item,index) in tab" :key="item.id" @click="change(item.id)">
							<view class="name" :class="[{'split':index!=tab.length-1}]">{{item.name}}</view>
							<view class="iconfont f-s18 ani">&#xeb6d;</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 搜索区域 -->
			<view v-if="selected" class="search-page-draw">
				<view class="select-list-body">
					<!-- 专业 -->
					<template v-if="selected===1">
						<view class="options-wrap row-2">
							<view class="left">
								<view class="item" @click="filterIndex='-1';rult.apply_type='';selected=0;tab[0].name='不限'">
									<view class="name" :class="[{'color-theme':filterIndex=='-1'}]">不限</view> 
								</view>
								<view class="item" v-for="(item,index) in types" :key="item.id"	@click="filterIndex=index;rult.apply_type=item.id">
									<view :class="[{'color-theme':filterIndex==index}]" class="name">{{item.name}}</view> 
								</view>
							</view>
							<view class="right">
								<template v-if="filterIndex>=0">
									<view class="item" v-for="(item,index) in types[filterIndex].child_cate" :key="index" @click="selId(1,item.id,item.name)" >
										<view class="name">{{item.name}}{{item.id}}</view>						
										<view v-if="item.id==rult.child_apply_type" class="iconfont f-s38 f-blue">&#xe637;</view>
									</view>
								</template>
							</view>
						</view> 
					</template>
					
					<template v-if="selected===2">
						<view class="left2">
							<view class="item" @click="selId(2,'','不限')">
								<view class="name" :class="[{'color-theme':rult.user_id==''}]">不限</view>
								<view v-if="rult.user_id==''" class="iconfont f-s38 f-blue">&#xe637;</view>
							</view>
							<view class="item" v-for="(item,index) in users" :key="index" @click="selId(2,item.id,item.title)">
								<view class="name" :class="[{'color-theme':item.id==rult.user_id}]">{{item.title}}</view>
								<view v-if="item.id==rult.user_id" class="iconfont f-s38 f-blue">&#xe637;</view>
							</view>
						</view> 
					</template>					
					 
					<template v-if="selected===3">
						<view class="left2"> 
							<view class="item" @click="selId(3,'','不限')">
								<view class="name" :class="[{'color-theme':rult.storehouseman==''}]">不限</view>
								<view v-if="rult.storehouseman==''" class="iconfont f-s38 f-blue">&#xe637;</view>
							</view>
							<view class="item" v-for="(item,index) in storehouse" :key="index"	@click="selId(3,item.storehouseman,item.sname)">
								<view class="name" :class="[{'color-theme':item.storehouseman==rult.storehouseman}]">{{item.sname}}</view>
								<view v-if="item.storehouseman==rult.storehouseman" class="iconfont f-s38 f-blue">&#xe637;</view>
							</view>
						</view> 
					</template>
					 
					<template v-if="selected===4">
						<view class="left2"> 
							<view class="item" @click="selId(4,'','不限')">
								<view class="name" :class="[{'color-theme':rult.orderby==''}]">不限</view>
								<view v-if="rult.orderby==''" class="iconfont f-s38 f-blue">&#xe637;</view>
							</view>
							<view class="item" v-for="(item,index) in sort" :key="index" @click="selId(4,item.id,item.name)">
								<view class="name" :class="[{'color-theme':item.id==rult.orderby}]">{{item.name}}</view>
								<view v-if="item.id==rult.orderby" class="iconfont f-s38 f-blue">&#xe637;</view>
							</view>
						</view> 
					</template>
				</view>
				
			</view>
 
			<template >
				<view class="body">
					<view v-if="list.length>0" class="list-wrap">
						<view class="item" v-for="(item,index) in list" :key="index" @click="jump(index)">
							<view class="name row-2">  
								<text v-if="item.apply_type==1">{{item.username}}发的申请入库</text>
								<text v-if="item.apply_type==2">{{item.username}}发的申请出库</text>
								<text v-if="item.apply_type==3">{{item.username}}发的申请需求</text>
								<text v-if="item.apply_type==4">{{item.username}}发的成品入库</text>
								<text v-if="item.apply_type==5">{{item.username}}发的合成成品</text>
								<text v-if="item.apply_type==6">{{item.username}}发的仓库发仓库</text> 
								
								<text v-if="item.apply_status==1" class="f-red">审批中</text>
								<text v-if="item.apply_status==2" class="f-red">审批通过</text>
								<text v-if="item.apply_status==3" class="f-red">审批不通过</text>
								<text v-if="item.apply_status==4 && (item.apply_type==5 || item.apply_type==4 || item.apply_type==1)" class="f-red">已入库</text>
								<text v-if="item.apply_status==6 && (item.apply_type==6)" class="f-red">已入库</text>
								<text v-if="item.apply_status==4 && (item.apply_type==2 || item.apply_type==6)" class="f-red">已发货</text>
								<text v-if="item.apply_status==-1" class="f-red">已撤回</text>
								 
							</view>
							<view v-if="item.product_list.length>0" class="row-2">
								<text>货物名称</text>
								<text v-if="item.product_list.length>1">有{{item.product_list.length}}种货物</text>
								<text v-else>{{item.product_list[0].pname}}</text>
							</view>
							<view class="row-2"> 
								<text>申请时间</text>
								<text>{{item.create_time}}</text>
							</view>
							<view class="row-2">
								<text>订单ID</text>
								<text>{{item.apply_id}}</text>
							</view> 
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
					</view> 
					<template v-else>
						<c-empty ></c-empty>
					</template>

				</view>
			</template>

			 
		</template>
	</view>
</template>

<script>
	 
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				userInfo: {},
			
				loadingState: {
					default:false,
					loading:false,
					completed:false
				},
				tab: [{
						id: 1,
						name: "类型"
					},
					{
						id: 2,
						name: "用户"
					},
					{
						id: 3,
						name: "仓库"
					},
					{
						id: 4,
						name: "排序"
					}
				],
				sort:[
					{
						id:1,
						name:'顺序'
					},
					{
						id:2,
						name:'倒序'
					}
				],
				types:[ 
					{
						id:1,
						name:'入库',
						child_cate:[
							{
								id:1,
								name:'入库审批中'
							},
							{
								id:2,
								name:'待入库'
							},
							{
								id:4,
								name:'已入库'
							},
							{
								id:3,
								name:'不通过'
							},
							{
								id:-1,
								name:'已撤回'
							},
							{
								id:5,
								name:'已拒绝'
							},
							{
								id:9,
								name:'待签收'
							},
							{
								id:10,
								name:'已签收'
							}
						]
					},
					{
						id:2,
						name:'出库',
						child_cate:[
							{
								id:1,
								name:'出库审批中'
							},
							{
								id:2,
								name:'待发货'
							},
							{
								id:4,
								name:'已发货'
							},
							{
								id:3,
								name:'不通过'
							},
							{
								id:-1,
								name:'已撤回'
							},
							{
								id:5,
								name:'已拒绝'
							},
							{
								id:9,
								name:'待签收'
							},
							{
								id:10,
								name:'已签收'
							}
						]
					}
				],
				storehouse:[],
				users:[],
				keyword: "",
				selected: 0,
				list: [],				 
				filterIndex: 0,
				rult: {
					orderby:'',
					storehouseman:'',
					user_id:'',
					apply_type:'', 
					child_apply_type:'',
					limit: 20,
					page:1,
					search:''
				}, 
			};
		},
		onReachBottom() {
			if(this.loadingState.completed){
				return
			}else{
				this.rult.page++;
				this.getList();
			} 

		},
		onPullDownRefresh() { 
		},
		onShow() { 
		},
		async onLoad() { 
			this.goodsstorehouse();
			this.mealluser();
			this.getList();
		},

		methods: {
			async jump(idx){
				let item=this.list[idx];
				let apply_id=item.apply_id||item.id;
				let url='';
				console.log(item)
				if(item.notice_id){
					url=`/package_kucun/msg-detail/msg-detail?notice_id=${item.id}&apply_id=${apply_id}`
				}else{
					url=`/package_kucun/msg-detail/msg-detail?apply_id=${apply_id}`
				}
				uni.navigateTo({
					url:url
				})
			},
			
			// 初始化参数
			dataInit(){
				this.list=[];
				this.rult.page=1;
				this.loadingState.default=false;
				this.loadingState.loading=false;
				this.loadingState.completed=false;
			},			
			 
			async goodsstorehouse(){
				const res = await this.$api.user_api.goodsstorehouse();  
				if(res.data.code==200){
					this.storehouse=res.data.data;
				}
			},
			
			async mealluser(){
				const res = await this.$api.user_api.mealluser();  
				if(res.data.code==200){
					this.users=res.data.data;
				}
			},
			
			 
			async getList(){
				let {orderby,search,user_id,storehouseman,page,limit,apply_type,child_apply_type}=this.rult;
				
				const res = await this.$api.user_api.meall({
					orderby,
					search,
					user_id,
					storehouseman,
					page,
					limit,
					apply_type:	(apply_type&&child_apply_type)?(apply_type+','+child_apply_type):''		
				});     
				if(res.data.code==200){									
					this.list=this.list.concat(res.data.data); 
					if(res.data.data.length<limit){
						// this.loadingState.default=f;
						this.loadingState.completed=true;	
					}
					 
				}
			},			
			 
			change(num) { 
				this.selected = num; 
			},			 
			
			// 单选
			selId(type,id,name) { 
				if(type==1){ 
					this.rult.child_apply_type=id;
					this.tab[0].name=name;
				}
				if(type==2){ 
					this.rult.user_id=id;
					this.tab[1].name=name;
				}  
				if(type==3){ 
					this.rult.storehouseman=id;
					this.tab[2].name=name;
				}
				if(type==4){ 
					this.rult.orderby=id;
					this.tab[3].name=name;
				}  
				this.selected = 0;
				this.dataInit(); 
				this.getList();
			},
			 
			search() {
				this.dataInit();
				this.selected = 0;
				this.getList();
				// this.keyword = "";
			},
			clearKeywords() {
				this.dataInit();
				this.selected = 0;
				this.rult.search='';
				this.getList();
			},
			 
		},
		components: {},
		computed: {
			 
		},
		watch: {}
	};
</script>

<style lang="less" scoped>
	.list-wrap{
		padding:20rpx 0;
		.item{ 
			padding:20rpx; 
			margin-bottom: 20rpx;
			background: #fff; 
			color: #999;
			font-size: 30rpx;
			.name{
				padding: 20rpx 0;
				color:#333;
			}
			.row-2{
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
			}
			.row-1{				 
				margin-bottom: 10rpx;
				color: #333;
				font-size: 30rpx;
			}
			.btn-wrap{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding:20rpx 0 0; 
				border-top: 1rpx solid #e5e5e5;
				font-size: 30rpx;
				.btn{
					padding: 10rpx 20rpx;
					margin-left: 20rpx;
					background: #1cab1b;
					border-radius: 8rpx;
					color: #fff;
				}
			}
			 
		}
	}

	.color-theme {
		color: #3b7df7 !important;
	}

	.search-page-draw {
		position: fixed;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.1);

		.btn-wrap { 
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;

			.btn {
				width: 50%;
				line-height: 80rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.cancle {
				background: #f5f5f5;
				color: #999;
			}

			.confirm {
				background: #09f;
				color: #fff;
			}
		}
	}

	.row-1 {
		.left {
			width: 50%;
			height: 560rpx;
			overflow-y: auto;
		}

		.right {
			overflow-y: auto;
		}

		.left2 {
			width: 100%;
			overflow-y: auto;
		}
	}

	.row-2 {

		.left,
		.right {
			width: 50%;
			height: 560rpx;
			overflow-y: auto;
		}

	}

	.select-list-body {		 
		background: #fff;		
		.options-wrap{
			width: 100%;
			display: flex; 
			max-height: 590rpx;
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 94%;
			height: 80rpx;
			padding: 0 3%;
			border-bottom: 1rpx solid #eee;
			.name {
				font-size: 30rpx;
				color: #333;
			}
			.iconfont {
				color: #999;
			}
		}
	}
</style>
